<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script src="js/jquery.js"></script>
    <script src="js/vue-router.js"></script>
    <!-- import Vue before Element -->
    <script src="https://unpkg.com/vue/dist/vue.js"></script>
    <!-- 引入样式 -->
    <link rel="stylesheet" href="https://unpkg.com/element-ui/lib/theme-chalk/index.css">
    <!-- 引入组件库 -->
    <script src="https://unpkg.com/element-ui/lib/index.js"></script>
</head>

<body>

    <div id="app">
        <el-card>
            <div style="margin-bottom: 20px;height: 40px;">
                <el-button type="primary" @click="addRecord" style="float: left;margin-top: 5px;" size="small">添加记录
                </el-button>
                <el-input placeholder="在这里查找记录"
                    style="float: left;width: 300px;margin-left: 20px;line-height:20px;height: 20px;"></el-input>
                <el-button type="primary" @click="searchRecord" style="float: left;margin-left: 10px;margin-top: 5px;"
                    size="small">搜索</el-button>
            </div>
            <el-table :data="equipValueList" stripe style="width: 100%">
                <el-table-column prop="id" label="设备编号" width="300">
                </el-table-column>
                <el-table-column prop="time" label="监测时间">
                </el-table-column>
                <el-table-column prop="threshold" label="设备阈值">
                </el-table-column>
                <el-table-column prop="concentration" label="设备监测值">
                </el-table-column>
                <el-table-column prop="type" label="监测类型">
                </el-table-column>
                <el-table-column label="操作">
                    <template slot-scope="scope">
                        <el-button type="primary" @click="toUpdate(scope.row.id)">更新</el-button>
                        <el-button type="danger" @click="delete(scope.row.id)">删除</el-button>
                    </template>
                </el-table-column>
            </el-table>
        </el-card>


        <el-dialog title="更新数据" :visible.sync="updateModalVisible" width="50%">
            <el-form label-position="left" label-width="80px" :model="updateForm">
                <el-form-item label="id">
                  <el-input v-model="updateForm.id"></el-input>
                </el-form-item>
                <el-form-item label="设备阈值">
                  <el-input v-model="updateForm.threshold"></el-input>
                </el-form-item>
                <el-form-item label="监测值">
                  <el-input v-model="updateForm.concentration"></el-input>
                </el-form-item>
                <el-form-item label="监测时间">
                    <el-input v-model="updateForm.time"></el-input>
                  </el-form-item>
                  <el-form-item label="监测类型">
                    <el-input v-model="updateForm.type"></el-input>
                  </el-form-item>
              </el-form>
            <span slot="footer" class="dialog-footer">
                <el-button @click="updateModalVisible = false">取 消</el-button>
                <el-button type="primary" @click="updateModalVisible = false">确 定</el-button>
            </span>
        </el-dialog>
    </div>

    <script>
        var vm = new Vue({
            el: '#app',
            data() {
                return {
                    equipValueList: [],
                    updateForm: {
                        'id': '',
                        'threshold': '',
                        'concentration': '',
                        'time': '',
                        'type': ''
                    },

                    updateModalVisible: false,
                }
            },
            mounted() {
                this.getEquipValueList();
            },
            methods: {
                getEquipValueList() {
                    $.ajax({
                        type: 'get',
                        url: 'http://localhost:8080/equipment/getAllEquipmentValue',
                        dataType: 'json',
                        success: function (data) {
                            console.log(data);
                            if (data.code === 200) {
                                vm.equipValueList = data.data.values;
                            }
                        }
                    })
                },
                addRecord() {},
                searchRecord() {},
                toUpdate(id) {
                    vm.updateModalVisible = true;
                },
                delete(id) {

                }
            }
        })
    </script>
</body>

</html>